<template>
	<view class="zan-actionsheet" :class="{ 'zan-actionsheet--show': show }">
		<view class="mask-class zan-actionsheet__mask" @tap="onMaskClick"></view>
		<view class="container-class zan-actionsheet__container">
			<!-- 选项按钮 -->
			<zan-button v-for="(item, index) in actions" :key="index" class="zan-actionsheet__btn" @btnclick="handleBtnClick" :data-index="index" :open-type="item.openType" :loading="item.loading">
				<!-- 自定义组件控制 slot 样式有问题，故在 slot 容器上传入 loading 信息 -->
				<view class="zan-actionsheet__btn-content" :class="{ 'zan-actionsheet__btn--loading': item.loading }">
					<view class="zan-actionsheet__name">{{ item.name }}</view>
					<view v-if="item.subname" class="zan-actionsheet__subname">{{ item.subname }}</view>
				</view>
			</zan-button>

			<!-- 关闭按钮 -->
			<view v-if="cancelText" class="zan-actionsheet__footer">
				<zan-button custom-class="zan-actionsheet__btn" @tap="cancelClick">{{ cancelText }}</zan-button>
			</view>
		</view>
	</view>
</template>

<script>
import zanButton from '@/components/btn/index.vue';
export default {
	components: {
		zanButton
	},
	props: {
		actions: {
			type: Array,
			default: () => {
				return [];
			}
		},
		show: {
			type: Boolean,
			default: false
		},
		cancelWithMask: {
			type: Boolean,
			default: true
		},
		cancelText: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	methods: {
		onMaskClick() {
			if (this.cancelWithMask) {
				this.cancelClick();
			}
		},
		cancelClick(e) {
			this.$emit('cancel', e);
		},
		handleBtnClick(e) {
			let currentTarget = e.currentTarget;
			currentTarget = currentTarget === undefined ? {} : currentTarget;

			let dataset = currentTarget.dataset || {};
			const index = dataset.index;
			this.$emit('actionclick', { index: index });
		}
	}
};
</script>

<style>
.zan-actionsheet {
	background-color: #f8f8f8;
}

.zan-actionsheet__mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.7);
	display: none;
}

.zan-actionsheet__container {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f8f8f8;
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
	-webkit-transform-origin: center;
	transform-origin: center;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	z-index: 11;
	opacity: 0;
	visibility: hidden;
}

.zan-actionsheet__btn {
	margin-bottom: 0 !important;
}

.zan-actionsheet__footer .zan-actionsheet__btn {
	background: #fff;
}

.zan-actionsheet__btn-content {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-direction: row;
	-webkit-box-pack: center;
	justify-content: center;
}

.zan-actionsheet__subname {
	color: #999;
}

.zan-actionsheet__name,
.zan-actionsheet__subname {
	height: 45px;
	line-height: 45px;
}

.zan-actionsheet__btn.zan-btn:last-child::after {
	border-bottom-width: 0;
}

.zan-actionsheet__subname {
	margin-left: 2px;
	font-size: 12px;
}

.zan-actionsheet__footer {
	margin-top: 10px;
}

.zan-actionsheet__btn--loading .zan-actionsheet__subname {
	color: transparent;
}

.zan-actionsheet--show .zan-actionsheet__container {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	visibility: visible;
}

.zan-actionsheet--show .zan-actionsheet__mask {
	display: block;
}
</style>
